
import type { placeholderSign } from 'element-plus/es/components/table-v2/src/private';
<template>
  <div class="app-container">
    <div>
      <el-row :gutter="10">
        <el-col :span="6" :xs="24" :lg="24">
          <div class="bgwhite plr20 ptb20 radius10 flex-col">
            <div class="justify-between w100p">
              <div class="clr3c4 bold ft26">編輯|查看</div>
              <div class="clr9fa align-center pointer" @click="back()">
                <el-icon>
                  <Back />
                </el-icon>
                <span class="ml5">返回上一頁</span>
                <span class="plr20">|</span>
                <el-icon class="clr3c4"><View /></el-icon> 
                <span class="ml5 clr3c4">查看</span>
                <span class="plr20">|</span>

                <el-icon class="red"><Delete /></el-icon>
                <span class="red ml5">刪除</span>
              </div>
            </div>
            <div class="mt40">
              <el-form :label-position="labelPosition" label-width="auto" :model="formLabelAlign"
                style="max-width: 600px">
                <el-form-item label="標題" required>
                  <el-input v-model="formLabelAlign.name" disabled style="width: 380px;" placeholder="請輸入標題" />
                </el-form-item>
                <el-form-item label="消息内容" required>
                  <el-input v-model="formLabelAlign.region" placeholder="請輸入消息内容"  style="height:240px" />
                </el-form-item>
              </el-form>
              <div class="mt40 mb15 flex-cen ">
                <div class="align-center">
                  <el-button class="btn1">重置</el-button>
                  <el-button class="btn2">提交</el-button>
                </div>

              </div>
            </div>


          </div>

          <!-- <user-card :user="user" /> -->
        </el-col>

        <!-- <el-col :span="6" :xs="24">
          <user-card :user="user" />
        </el-col> -->

        <!-- <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="Activity" name="activity">
                <activity />
              </el-tab-pane>
              <el-tab-pane label="Timeline" name="timeline">
                <timeline />
              </el-tab-pane>
              <el-tab-pane label="Account" name="account">
                <account :user="user" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col> -->

      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import type { FormProps } from 'element-plus'

const labelPosition = ref<FormProps['labelPosition']>('right')

const formLabelAlign = reactive({
  name: '1',
  region: '',
  type: '',
})
const router = useRouter()
const back = () => {
  router.back()
}
</script>
<style scoped >
:deep(.el-upload--picture-card) {
  background-color: transparent;
  border: none;
}
:deep(.el-input__wrapper) {
  align-items:start;
}
</style>